<template>
	<view class="page">
		<view class="page-header">
			<view class="arrow">
				<uni-icon type="back" size="35"></uni-icon>
			</view>
			<view class="input">
				<slot name="inputData"></slot>
			</view>
			
			<view class="search" @tap="chageWordData">
				<uni-icon type="search" size="35"></uni-icon>
			</view>
		</view>	

		<view class="detail-data" v-if="isShow">
			<view class="d-title">
				{{list.word || list.ci || list.riddle}}
			</view>
			<view class="d-spell">
				{{list.pinyin}}
			</view>
			<view class="d-explanation">
				<view class="d-explanation-title">{{title}}</view>
				<text class="d-explanation-content">{{list.explanation || list.answer}}</text>
				<view v-if="isDerivation">
					<view class="d-explanation-title">[出处]</view>
					<text class="d-derivation">{{list.derivation}}</text>
				</view>
				<view v-if="isExample">
					<view class="d-explanation-title">[例句]</view>
					<text class="d-example">{{list.example}}</text>
				</view>
				
				<view class="d-more" v-if="isMore">
					<view class="d-explanation-title">[更多...]</view>
					<text class="d-example">{{list.more}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcon from '@/components/uni-icon.vue'
	export default {
		data() {
			return {
				myTitle: '这是自定义的标题'
			};
		},
		props:["title","isShow","list","isMore","isExample","isDerivation"],
		components: {
			uniIcon
		},
		methods: {
			chageWordData() {
				this.$emit("chageWordData");
			}
		}
	}
</script>

<style lang="scss">
	
</style>
